<template>
	<view class="integr">
		<view class="intNum">
			<view><text class="useInt">可用积分</text></view>
			<text class="useIntNum">{{ int }}</text>
		</view>
		<view class="inquire">
			<view class="inquireLeft"><text class="leftText">积分明细</text></view>
			<view class="lineC"></view>
			<view class="inquireRight"><text class="rightText">兑换记录</text></view>
		</view>
		<image class="boxImg" src="../../../static/image/dashbord/intTopBox_03.jpg" mode=""></image>
		<view class="line"></view>
		<view class="imgList">
			<view class="imgCard" v-for="(item, index) in discount">
				<image :src="isName(item.name)"></image>
				<view class="imgCardWrapper">
					<text class="imgCardText">{{ item.name }}</text>
				</view>
				<view class="imgCardIntWrapper">
					<text class="imgCardInt">{{ item.totleInt }}</text>
					<text class="imgCardIntText">积分</text>
				</view>
			</view>
		</view>
		<view class="noMore"><text class="noMoreText">没有更多了 ~</text></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'integr',
	data() {
		return {
			int: null,
			discount: {}
		};
	},
	onLoad(data) {
		this.int = data.int;
		this.discount = JSON.parse(data.discount);
	},
	onBackPress(options) {
		console.log(options, "options");
	},
	methods: {
		...mapState(['hasLogin']),
		isName(name) {
			switch (name) {
				case '外卖波波家族券': {
					return '../../../static/image/dashbord/intbobojiazu_03.jpg';
					break;
				}
				case '外卖买一赠一券': {
					return '../../../static/image/dashbord/intMaiyizengyi_03.jpg';
					break;
				}
				case '外卖买二赠一券': {
					return '../../../static/image/dashbord/intTwoToOne_03.jpg';
					break;
				}
				case '外卖咖啡券': {
					return '../../../static/image/dashbord/intkakfeiquan_03.jpg';
					break;
				}
			}
		}
	}
};
</script>

<style>
.intNum {
	display: inline-block;
	text-align: center;
	margin-bottom: 80rpx;
}
.integr {
	padding: 40rpx;
	position: relative;
}
.boxImg {
	width: 200rpx;
	height: 160rpx;
	position: absolute;
	right: 90rpx;
	top: 70rpx;
}
.line {
	width: 150%;
	height: 15rpx;
	background-color: #f2f2f2;
	margin: 20rpx 0 80rpx -60rpx;
}
.useInt {
	font-size: 24rpx;
}
.useIntNum {
	font-size: 60rpx;
}
.inquire {
	display: flex;
	position: relative;
}
.inquireLeft,
.inquireRight {
	font-size: 27rpx;
}
.lineC {
	width: 1px;
	height: 25rpx;
	background-color: #333333;
	position: absolute;
	left: 130rpx;
	top: 8rpx;
}
.inquireLeft {
	margin-right: 60rpx;
}
.imgList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.imgCard {
	margin-bottom: 50rpx;
}
.imgCard image {
	width: 300rpx;
	height: 160rpx;
}
.imgCardWrapper {
	margin: 15rpx 0 5rpx 0;
}
.imgCardInt {
	color: #b8751d;
	font-size: 34rpx;
	padding-right: 10rpx;
}
.imgCardIntText {
	font-size: 12rpx;
	color: #b7b7b7;
}
.noMore {
	text-align: center;
	font-size: 25rpx;
	color: #aaaaaa;
}
</style>
